<script setup lang="ts">
import { Trash } from "@vicons/ionicons5";
import useBiliStore from "@/store/modules/useBiliStore";

const biliStore = useBiliStore();
const emit = defineEmits<{
  (e: "update:show", val: boolean): void;
}>();
const setting = biliStore.replyPlugin.config;
function onModalEnter() {}
function onModalLeave() {}
function addKeywords() {
  const t = Date.now();
  setting.keywords.push({
    _id: t,
    key: "",
    value: ""
  });
}
function delKeywords(idx) {
  setting.keywords.splice(idx, 1);
}
function addTimes() {
  const t = Date.now();
  setting.times.push({
    _id: t,
    minute: 1,
    value: ""
  });
}
function delTimes(idx) {
  const item: any = setting.times[idx];
  if (item._timeId) {
    clearInterval(item._timeId);
    item._timeId = 0;
  }
  setting.times.splice(idx, 1);
}
</script>

<template>
  <n-modal
    preset="card"
    class="w-150 min-w-100 min-h-80"
    title="回复姬"
    :on-after-enter="onModalEnter"
    :on-after-leave="onModalLeave"
    @update:show="$emit('update:show', $event)"
  >
    <div class="text-xs text-red">
      <span>占位符: </span>
      <span>%name%(用户昵称)</span>
    </div>
    <n-tabs type="line" animated>
      <n-tab-pane name="keywordsTab" tab="关键字">
        <n-button
          class="mb-2"
          type="primary"
          round
          size="small"
          @click="addKeywords"
          >添加</n-button
        >
        <div
          v-for="(item, idx) in setting.keywords"
          :key="item._id"
          class="flex-sc gap-x-4"
        >
          <n-input
            v-model:value.trim="item.key"
            type="text"
            show-count
            placeholder="请输入关键字"
          />
          <n-input
            v-model:value.trim="item.value"
            type="text"
            show-count
            placeholder="请输入回复文本"
          />
          <n-icon size="30" @click="delKeywords(idx)">
            <Trash />
          </n-icon>
        </div>
      </n-tab-pane>
      <n-tab-pane name="timeTab" tab="定时">
        <n-button
          class="mb-2"
          type="primary"
          round
          size="small"
          @click="addTimes"
          >添加</n-button
        >
        <div
          v-for="(item, idx) in setting.times"
          :key="item._id"
          class="flex-sc gap-x-4"
        >
          <n-input
            v-model:value.trim="item.value"
            type="text"
            show-count
            placeholder="请输入回复文本"
          />
          <n-input-number
            v-model:value.trim="item.minute"
            class="w-40"
            button-placement="both"
          />
          <n-icon size="30" @click="delTimes(idx)">
            <Trash />
          </n-icon>
        </div>
      </n-tab-pane>
    </n-tabs>
  </n-modal>
</template>

<style scoped lang="scss"></style>
